<template>
    <div>
        <Header></Header>
        <el-row class="tac">
            <el-col :span="12">
                <el-menu default-active="$route.path" class="el-menu-vertical-demo" @select="changeSidebar">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>教学管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/Adminpage/Course">
                                课表管理
                            </el-menu-item>
                            <el-menu-item index="/Adminpage/Class">班级管理</el-menu-item>
                            <el-menu-item index="/Adminpage/Subject">学科管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>人员管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">教师管理</el-menu-item>
                            <el-menu-item index="2-2">学生管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>房屋管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">教室管理</el-menu-item>
                            <el-menu-item index="1-2">宿舍管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
        <el-container>
            <el-main>
                <!-- 仔细看，核心在这，这里是路由的出口-->
                <router-view></router-view>
            </el-main>
        </el-container>
        <div class="huanying">
            <h1>欢迎来到学校管理系统</h1>
        </div>
    </div>
</template>

<script>
import Header from '@/components/Header.vue';
    export default {
    name: "AdminPage",
    methods: {
        coursePage() {
        },
        changeSidebar(path) {
            // console.log(path);
            this.$router.push(path);
        }
    },
    components: { Header }
}
</script>

<style>
.el-menu-vertical-demo{
    border-right: solid 1px #e6e6e6;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: #FFF;
    width: 30%;
}
.huanying{
    position:fixed;
    top:0;
    margin-left:40%;
    color:red;
    font-style:oblique;
    font-weight:50px;
}
</style>